<template>
  <div>
    <el-row class="row-bg" style="padding: 100px 2vw 20px 2vw">
        <dv-border-box-10 :color="['rgb(13,0,0)','rgb(34,69,114)']">
          <el-card shadow="hover" class="digital-card" style="vertical-align: center;padding-top: 20px">
            <el-row>
              <el-col :span="11" style="margin-top: 4px;">
                <span class="number-content">总告警数</span>
              </el-col>
              <el-col :span="13">
                <span class="number red">{{ totalAlarmNum }}</span>
              </el-col>
            </el-row>
          </el-card>
        </dv-border-box-10>

        <dv-border-box-10 :color="['rgb(13,0,0)','rgb(34,69,114)']">
          <el-card shadow="hover" class="digital-card" style="vertical-align: center;padding-top: 20px">
            <el-row>
              <el-col :span="11" style="margin-top: 4px;">
                <span class="number-content">一级告警数</span>
              </el-col>
              <el-col :span="13">
                <span class="number">{{ classoneAlarmNum }}</span>
              </el-col>
            </el-row>
          </el-card>
        </dv-border-box-10>

        <dv-border-box-10 :color="['rgb(13,0,0)','rgb(34,69,114)']">
          <el-card shadow="hover" class="digital-card" style="vertical-align: center;padding-top: 20px">
            <el-row>
              <el-col :span="11" style="margin-top: 4px;">
                <span class="number-content">二级告警数</span>
              </el-col>
              <el-col :span="13">
                <span class="number">{{ classtwoAlarmNum }}</span>
              </el-col>
            </el-row>
          </el-card>
        </dv-border-box-10>

        <dv-border-box-10 :color="['rgb(13,0,0)','rgb(34,69,114)']">
          <el-card shadow="hover" class="digital-card" style="vertical-align: center;padding-top: 20px">
            <el-row>
              <el-col :span="11" style="margin-top: 4px;">
                <span class="number-content">月总告警数</span>
              </el-col>
              <el-col :span="13">
                <span class="number">{{ monthAlarmNum }}</span>
              </el-col>
            </el-row>
          </el-card>
        </dv-border-box-10>
        <dv-decoration-5 style="width:100%;height:30px" :color="['rgb(34,69,114)','rgb(4,17,153)']"/>
      </el-row>
  </div>
  </template>

<script>
import request from '@/network/request'
export default {
  name: 'alarmData',
  data () {
    return {
      timer: null,
      totalAlarmNum: 0,
      monthAlarmNum: 0,
      classoneAlarmNum: 0,
      classtwoAlarmNum: 0
    }
  },
  created () {
    this.getData()
  },
  mounted () {
    this.timer = setInterval(() => {
      this.getData()
    }, 5000
    )
  },
  beforeDestroy () {
    clearInterval(this.timer)
  },
  methods: {
    getData () {
      request({
        method: 'GET',
        url: '/dataOp/getAllCount'
      }).then(res => {
        console.log(res.data)// 请求的返回体
        this.totalAlarmNum = res.data.data.allCount.totalAlarmNum
        this.monthAlarmNum = res.data.data.allCount.monthAlarmNum
        this.classoneAlarmNum = res.data.data.allCount.classoneAlarmNum
        this.classtwoAlarmNum = res.data.data.allCount.classtwoAlarmNum
      }).catch((error) => {
        console.log(error)// 异常
      })
    }
  }
}
</script>

<style scoped>
@import "../../../assets/scss/font.css";
.digital-card{
  border-radius: 10px;
  height: 12vh;
  margin-bottom: 4vh;
  border: none;
  background-color: rgba(4,17,53, 0.2);
}
.number {
  font-size: 2.5vw;
  font-family: led,serif;
}
.number-content {
  font-size: 1.2vw;
  font-family: serif;
  padding-top: 2vh;
}
.red{
  color: red;
}
</style>
